JQuery code implementation dialog box top-right menu with closed ×, jquery dialog box
First, we will show you the details as follows. If you think it is good, please refer to the implementation code:
The Code is as follows:
The
When we were shopping in the sky cat, often hit the click delete button or Login button, pop-up dialog box to ask you whether to delete or pop-up a login dialog box, and we can also see our previous page information, is not clicked, only the dialog
dialog box (dialog) is a very important feature of the jquery UI. It completely replaces JavaScript.Alert (), prompt () and other methods, also avoids the new window or the complex redundancy of the page.
A Open Multiple DialogThis can be done as long as you set a different ID.
$ (' #x ').
When we are shopping in the Tmall, often encounter click delete button or login button, pop-up dialog asks you whether to delete or pop up a login dialog box, and we can also see our previous page information, is not clickable, only the dialog box to operate only after the c
: {' Email ': {required:true, Email:true }, ' UserName ': {required:true, Stringcheck:true, minlength:3, MaxLength:20 }, ' Mobile ':{ //required:true,//With no sentence to indicate that this item does not fill also can, if fill in will check fill in the RulesIsMobile:true }, ' Password ': {required:true, minlength:6, MaxLength:20 },
First of all, introduce the two plug-ins function
1.DataTables is a form of jquery plug-in.
Official website and its download address: http:/www.datatables.net
The main features are as follows:
1. Automatic Paging processing
2. Instant Tabular Data filtering
3. Data sorting and data type automatic detection
4. Automatically handle column widths
5. Can be customized through the CSS style
6. Support for hidden columns
7. Easy to use
8. Scalab
The principle is very simple, through JS dynamically build a div layer, insert it into the body, and then by adjusting the position CSS properties for absolute or fixed, leaving the original document flow position. And then through the proper processing and beautification becomes.
Copy Code code as follows:
This is the structure of the two div layers, and the first background masking layer is created only when it is needed. Each div defines a CSS class that makes it eas
Main ParametersCommon Parameters of jQuery UI Dialog include:1. autoOpen: The default value is true. The dialog box is displayed when the dialog method is created.2. buttons: None by default. It is used to set the display button, which can be in JSON or Array format:{"OK": f
JQuery UI Dialog is a component of the jQuery UI pop-up Dialog box. It can be used to create various beautiful pop-up Dialog boxes. It can be used to set the title and content of the Dialog
Main Parameters
Common Parameters of jQuery UI Dialog include:
1. autoOpen: The default value is true. The dialog box is displayed when the dialog method is created.2. buttons: None by default. It is used to set the display button, which can be in JSON or Array format:{"OK"
Main parameters
The common parameters for JQuery UI dialog are:
1, AutoOpen: Default True, that is, the dialog method is created to display the dialog box
2, buttons: Default None, used to set the button to display, can be JSON and array form:
{OK: function () {}, Cancel: f
The DIV layer dialog box is displayed in jquery UI. The effect preview is as follows:Http://keleyi.com/keleyi/phtml/jui/dialog/index.htm
CompleteCodeTo save it to an HTML file. You can also preview the effect after opening the file:
Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.
The jquery UI is a jquery based open source JavaScript Web user interface code base. A visual control that contains low-level user interaction, animations, effects, and replaceable topics.
Preparing for the JQuery environment
First, we create a button, and when we click on the button, a dialog
title bar range, and if the event bound to the title bar is invalidated, and binding to document is not.
var mouse={x:0,y:0};
function Movedialog (event)
{
var e = window.event | | Event
var top = parseint (Dialog.css (' top ')) + (E.CLIENTY-MOUSE.Y);
var left = parseint (Dialog.css (' left ')) + (e.clientx-mouse.x);
Dialog.css ({top:top,left:left});
mouse.x = E.clientx;
Mouse.y = E.clienty;
};
Dialog.find ('. Bar '). MouseDown (function (event) {
var e = window.even
Click the pop-up dialog box of the jQuery pop-up layer, click the modal box, and the code sharing will disappear. jquery Mode
If you don't talk much about it, paste the Code directly. The specific code is as follows:
The above is a small part of the
I'm sure you are not familiar with the deletion prompt box, that is, the pop-up dialog box for deletion is common. The following uses jquery to implement it. Do not miss it if you are interested.
The Code is as follows:
/*** Delete draft*/Function deleteDraft (the, id ){$. Messager. confirm ('delete draft notific
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.